<template>
  <div id="oldtree" style="height:33.4vh"></div>
</template>

<script>
/* eslint-disable no-undef */
require('../../static/weishidataview/echarts-all')
export default {
  name: 'TwOldTree',
  mounted () {
    this.resizeChart()
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    resizeChart () {
      let myChart = echarts.init(document.getElementById('oldtree'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        calculable: false,

        series: [
          {
            name: '树图',
            type: 'tree',
            orient: 'horizontal',
            rootLocation: {x: 180, y: '50%'}, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 15,
            layerPadding: 50,
            symbol: 'circle',
            symbolSize: 40,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inside',
                  textStyle: {
                    color: '#cc9999',
                    fontSize: 15,
                    fontWeight: 'bolder'
                  }
                },
                lineStyle: {
                  color: '#000',
                  width: 1,
                  type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                }
              },
              emphasis: {
                label: {
                  show: true,
                  position: 'inside',
                  textStyle: {
                    color: '#cc9999',
                    fontSize: 15,
                    fontWeight: 'bolder'
                  }
                }
              }
            },
            data: [
              {
                name: '嘉兴ECO云开放平台',
                value: 6,
                symbolSize: [180, 70],
                symbol: 'none',
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      textStyle: {
                        color: '#bad3ff',
                        fontSize: 18
                      }
                    }
                  },
                  emphasis: {
                    label: {
                      show: true,
                      textStyle: {
                        color: '#bad3ff',
                        fontSize: 18
                      }
                    }
                  }
                },
                children: [
                  {
                    name: '户籍',
                    value: 4,
                    symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
                    itemStyle: {
                      normal: {
                        label: {
                          show: false
                        }
                      }
                    },
                    symbolSize: [60, 60],
                    children: [
                      {
                        name: '学期：10次',
                        symbol: 'circle',
                        symbolSize: 20,
                        value: 4,
                        itemStyle: {
                          normal: {
                            color: '#fa6900',
                            label: {
                              show: true,
                              position: 'right'
                            }
                          },
                          emphasis: {
                            label: {
                              show: false
                            },
                            borderWidth: 0
                          }
                        }
                      },
                      {
                        name: '累计：12次',
                        value: 4,
                        symbol: 'circle',
                        symbolSize: 20,
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'right',
                              formatter: '{b}'
                            },
                            color: '#fa6900',
                            borderWidth: 2,
                            borderColor: '#cc66ff'

                          },
                          emphasis: {
                            borderWidth: 0
                          }
                        }
                      }
                    ]
                  },
                  {
                    name: '社保',
                    symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',
                    symbolSize: [60, 60],
                    itemStyle: {
                      normal: {
                        label: {
                          show: false
                        }

                      }
                    },
                    value: 4,
                    children: [
                      {
                        name: '学期：10次',
                        symbol: 'circle',
                        symbolSize: 20,
                        value: 4,
                        itemStyle: {
                          normal: {
                            color: '#fa6900',
                            label: {
                              show: true,
                              position: 'right'
                            }
                          },
                          emphasis: {
                            label: {
                              show: false
                            },
                            borderWidth: 0
                          }
                        }
                      },
                      {
                        name: '累计：12次',
                        value: 4,
                        symbol: 'circle',
                        symbolSize: 20,
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'right',
                              formatter: '{b}'
                            },
                            color: '#fa6900',
                            borderWidth: 2,
                            borderColor: '#cc66ff'

                          },
                          emphasis: {
                            borderWidth: 0
                          }
                        }
                      }
                    ]
                  },
                  {
                    name: '房产',
                    symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',
                    symbolSize: [60, 60],
                    itemStyle: {
                      normal: {
                        label: {
                          show: false
                        }

                      }
                    },
                    value: 2,
                    children: [
                      {
                        name: '学期：10次',
                        symbol: 'circle',
                        symbolSize: 20,
                        value: 4,
                        itemStyle: {
                          normal: {
                            color: '#fa6900',
                            label: {
                              show: true,
                              position: 'right'
                            }
                          },
                          emphasis: {
                            label: {
                              show: false
                            },
                            borderWidth: 0
                          }
                        }
                      },
                      {
                        name: '累计：12次',
                        value: 4,
                        symbol: 'circle',
                        symbolSize: 20,
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: 'right',
                              formatter: '{b}'
                            },
                            color: '#fa6900',
                            borderWidth: 2,
                            borderColor: '#cc66ff'

                          },
                          emphasis: {
                            borderWidth: 0
                          }
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
